<template>
  <div style="min-height: 300px">
    <a-form :model="entity" :rules="rules" label-width="120px">
      <a-form-item label="模板名称" field="name">
        <a-input v-model="entity.name"  />
      </a-form-item>
      <a-form-item label="产品类型" field="lx">
        <a-select v-model="entity.lx" placeholder="Please select ..." allow-clear>
          <a-option value="1">棒材</a-option>
          <a-option value="2">齿轮箱锻件</a-option>
        </a-select>
      </a-form-item>
    </a-form>

    <div>
      <h4 style="color: #f60000">只可添加产品类型的工序</h4>
      <a-space>
        <a-button type="primary" size="small" @click="addGongXu('下料')"><template #icon><icon-plus-circle /></template>下料</a-button>
        <a-button type="primary" size="small" @click="addGongXu('加热')"><template #icon><icon-plus-circle /></template>加热</a-button>
        <a-button type="primary" size="small" @click="addGongXu('快锻')"><template #icon><icon-plus-circle /></template>快锻</a-button>
        <a-button type="primary" size="small" @click="addGongXu('精锻')"><template #icon><icon-plus-circle /></template>精锻</a-button>
        <a-button type="primary" size="small" @click="addGongXu('热处理')"><template #icon><icon-plus-circle /></template>热处理</a-button>
        <a-button type="primary" size="small" @click="addGongXu('机加工')"><template #icon><icon-plus-circle /></template>机加工</a-button>
      </a-space>
    </div>
    <br />
    <a-steps type="arrow" :current="100">
      <a-step v-for="(step,index) in entity.stepList" :description="step" :key="step">{{step}}</a-step>
    </a-steps>
    <br />
    <div>
      <a-button type="primary" status="danger" size="small"  @click="refreshGy">重置工艺路线</a-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {reactive, ref, onMounted, defineProps, defineEmits, nextTick} from "vue";

const emit = defineEmits(['update:modelValue'])
let props = defineProps({
  modelValue : {type : Boolean, default: true},
  entityId : {type : Number, default: 0}
})

let entity = ref({
  id : props.entityId,
  name:'来料加工标准工艺',
  lx:'1',
  stepList:[],
})
const rules = reactive({
  name: [
    { required: true, message: '请输入模板名称', trigger: 'blur' },
  ],
})

const addGongXu = (stepName)=>{
  entity.value.stepList.push(stepName)
}
const refreshGy = ()=>{
  entity.value.stepList = [];
}
onMounted(()=>{
  nextTick(()=>{
  })
})
</script>

<style scoped>

</style>
